angular.module('pdf')
  .directive('pdfViewerToolbar', [
    'pdfDelegate',
  function(pdfDelegate) {
    return {
      restrict: 'E',
      template:
      '<div style="width:80%;"></div>'+
        '<div class="clearfix mb2 white bg-blue" style="position: absolute;bottom:-30px;left:50%;margin-left:-92px;">' +
          '<div class="left">' +
            '<a href=""' +
              'ng-click="prev()"' +
              'class="button py2 m0 button-nav-dark">'+
              '<img src="img/rightArrow.png" >' +
            '</a>' +
        // '<span class="px1">页</span> ' +
          '<span style="color:#fff;padding:0 15px" >'+'{{currentPage}}'+
        /*'<input type="text" class="field-dark" ' +
        'min=1 ng-model="currentPage" ng-change="goToPage()" ' +
        'style="width: 10%"> ' +*/
        ' / {{pageCount}}</span>' +

            '<a href=""' +
              'ng-click="next()"' +
              'class="button py2 m0 button-nav-dark"><img src="img/leftArrow.png" alt="">' +
            '</a>' +
            '<a href="" style="margin:0 20px 0 50px;"' +
              'ng-click="zoomIn()"' +
              'class="button py2 m0 button-nav-dark"><img src="img/enlargeiocn.png" alt="">' +
            '</a>' +
            '<a href=""' +
              'ng-click="zoomOut()"' +
              'class="button py2 m0 button-nav-dark"><img src="img/narrowiocn.png" alt="">' +
            '</a>' +
            // '<a href=""' +
            //   'ng-click="rotate()"' +
            //   'class="button py2 m0 button-nav-dark">Rotate' +
            // '</a>' +
        '</div>' +
        '</div>',
      scope: { pageCount: '=' },
      link: function(scope, element, attrs) {
        var id = attrs.delegateHandle;
        scope.currentPage = 1;

        scope.prev = function() {
          pdfDelegate
            .$getByHandle(id)
            .prev();
          updateCurrentPage();
        };
        scope.next = function() {
          pdfDelegate
            .$getByHandle(id)
            .next();
          updateCurrentPage();
        };
        scope.zoomIn = function() {
          pdfDelegate
            .$getByHandle(id)
            .zoomIn();
        };
        scope.zoomOut = function() {
          pdfDelegate
            .$getByHandle(id)
            .zoomOut();
        };
        scope.rotate = function() {
          pdfDelegate
            .$getByHandle(id)
            .rotate();
        };
        scope.goToPage = function() {
          pdfDelegate
            .$getByHandle(id)
            .goToPage(scope.currentPage);
        };

        var updateCurrentPage = function() {
          scope.currentPage = pdfDelegate
                                .$getByHandle(id)
                                .getCurrentPage();
        };
      }
    };
}]);
